<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div ref="HeatRef" :style="{ width, height }"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { Card, Button, Row, Col } from 'ant-design-vue'
import { useECharts } from '@/hooks/useECharts'
import { registerMap } from 'echarts'
import type { Ref } from 'vue'
import { useMassage } from '@/ntils/hooks'
import { heartMapOptions } from './config'
import { getMapname } from './helper'

export default defineComponent({
    name: 'Emap',
    components: {
        Card,
        Button,
        Row,
        Col,
    },
    props: {
        width: {
            type: String,
            default: () => '100%',
        },
        height: {
            type: String,
            default: () => '80vh',
        },
        datas: {
            type: Array,
        },
    },
    setup(props) {
        let { createMessage } = useMassage()
        const HeatRef = ref<HTMLDivElement | null>(null)
        onMounted(() => {
            let { setOptions } = useECharts(HeatRef as Ref<HTMLDivElement>)
            const initMaps = async (mname, data) => {
                let name = getMapname(mname) ?? mname
                if (name == mname) {
                    createMessage.warn(`${mname}块未被导入`)
                    return false
                }
                const json = (await (
                    await import(`./json/${name}.json`)
                ).default) as any
                // 1. 载入地图类型
                registerMap(name, json)
                setOptions(heartMapOptions(getMapname(mname), data, json))
            }
            let datas = props.datas ?? []
            // 更改 参数既可以更改地形，datas:地图数据
            initMaps('中国', datas)

            // 自适应
        })

        return {
            HeatRef,
        }
    },
})
</script>

<style lang="less" scoped></style>
